import React from 'react';

const formItemLayout = {
  labelCol: {
    xs: 3, // <576
    sm: 3, // >= 576
    md: 4, // >= 768
    lg: 4, // >= 992
    xl: 3, // >= 1200
    xxl: 2, // >= 1600
  }, // 左侧 label 宽度
  wrapperCol: { span: 18 }, // 右侧 控件 宽度
  style: {
    marginBottom: 24,
  },
};

// 一行显示个数
const ColConfig = {
  xs: 24, // <576
  sm: 24, // >= 576
  md: 24, // >= 768
  lg: 24, // >= 992
  xl: 24, // >= 1200
  xxl: 24, // >= 1600
};

export const formFieldsNames = {
  fodderInfo: 'fodderInfo', // 素材主题
  remark: 'remark', // 备注
  imgs: 'imgs', // 图片素材列表
};
export const basicsFormFields = [
  {
    inputType: 'input',
    title: formFieldsNames.fodderInfo,
    label: '素材主题',
    itemConfig: {
      rules: [
        {
          required: true,
          message: '请输入素材主题',
        },
      ],
    },
    componentsConfig: {
      placeholder: '请输入素材主题',
      maxLength: 50,
      style: { width: 440 },
    },
    formItemLayout,
    ColConfig,
  },
  {
    inputType: 'textArea',
    title: formFieldsNames.remark,
    label: '备注',
    itemConfig: {
      rules: [
        {
          required: false,
          message: '请输入备注',
        },
      ],
    },
    componentsConfig: {
      style: { width: 440 },
      allowClear: true,
      placeholder: '输入最多100字符',
      autoComplete: 'off',
      maxLength: 100,
      autoSize: {
        minRows: 3,
        maxRows: 6,
      },
    },
    formItemLayout,
    ColConfig,
  },
];
export const customFormfields = [
  {
    // 商品条件
    inputType: 'custom3',
    label: '图片素材',
    title: formFieldsNames.imgs,
    formItemLayout,
    ColConfig,
    componentsConfig: {
      childKeys: {},
    },
    itemConfig: {
      rules: [
        {
          required: true,
          message: '请上传图片素材',
        },
      ],
    },
    render: () => <div></div>,
  },
];
